<template>
  <views class="personlist">
    <!-- 新增人员 模态框 -->
    <modelBox :show="add_personnel_show">
      <div class="add_lists">
        <viewTitle :title="'人员新增'" :border="false"></viewTitle>
        <div class="add_input_lists">
          <div class="flex flexR center add_inputs">
            <div class="add_input_lists_title">姓名</div>
            <div class="add_input_lists_item">
              <el-input placeholder="请输入内容" v-model="add_personnels.name" clearable ref="name"></el-input>
            </div>
          </div>
          <div class="flex flexR center add_inputs">
            <div class="add_input_lists_title">身份证号</div>
            <div class="add_input_lists_item">
              <el-input
                placeholder="请输入身份证号码"
                v-model="add_personnels.cer_code"
                clearable
                ref="cer_code"
              ></el-input>
            </div>
          </div>
          <div class="flex flexR center add_inputs">
            <div class="add_input_lists_title">手机号码</div>
            <div class="add_input_lists_item">
              <el-input
                placeholder="请输入手机号码"
                v-model="add_personnels.mobile"
                clearable
                ref="mobile"
              ></el-input>
            </div>
          </div>
          <div class="flex flexR center add_inputs">
            <div class="add_input_lists_title">银行卡号</div>
            <div class="add_input_lists_item">
              <el-input
                placeholder="请输入银行卡号码"
                v-model="add_personnels.bank_code"
                clearable
                ref="bank_code"
              ></el-input>
            </div>
          </div>
          <div class="flex flexR center add_inputs" v-if="1==0">
            <div class="add_input_lists_title">业绩说明</div>
            <div class="add_input_lists_item">
              <el-input
                placeholder="请输入业绩说明"
                v-model="add_personnels.remarks"
                clearable
                ref="remarks"
              ></el-input>
            </div>
          </div>
        </div>
        <!-- 确认 取消 -->
        <div class="Confirm_cancel flex flexR center">
          <el-button type="primary" @click="add_personnel_send">确定</el-button>
          <el-button @click="add_personnel_show = !add_personnel_show">取消</el-button>
        </div>
      </div>
    </modelBox>

    <div class="enterprise_office_personlist" ref="enterprise_office_personlist">
      <div class="enterprise_office_personlist_1">
        <viewTitle :title="'人员签约记录'" :border="true"></viewTitle>
          <div class="upload_btn">
              <el-button @click="import_excal(personlist_xlsx)">人员导入模板下载</el-button>
              <div class="title">
                  第一步、点击【人员导入模板下载】下载Excel表格模板，将下载好的模板按照模板内的【填写说明】进行填写
              </div>
          </div>
        <el-upload
          class="upload-demo uploading_list upload_btn"
          ref="upload"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :file-list="fileList"
          :on-change="changeFile"
          :multiple="false"
          :limit="1"
          accept=".xls, .xlsx"
          :auto-upload="false"
        >
            <el-button   slot="trigger"  type="primary">选取文件</el-button>
            <div class="title">
              第二步、点击【选取文件】，找到已填写完并已保存的【批量代发Excel表格】并选取该文件
            </div>
        </el-upload>
          <div class="upload_btn">
              <el-button type="success" @click="submitUpload" v-show="isAdd">上传到服务器</el-button>
              <div class="title">
                  第三步、点击【上传到服务器】，将已选定的Excel表格进行上传，完成批量代发信息导入流程
              </div>
          </div>


          <div slot="tip" class="el-upload__tip upload_tip">只能上传xls/xlsx文件，且不超过500kb</div>

        <div class="Import_prompt">
          <viewTitle :title="'批量导入指导'" :border="true"></viewTitle>
          <div class="Import_prompt_list flex">
            <div class="prompt_lists flex flexC">
              <div>1.企业下载人员批量导入信息模板，并按照模板格式要求填写表格</div>
              <div>2.点击选取文件，选择已填写完并保存的表格进入导入</div>
              <div>3.导入后点击上传至服务器，上传完成后会会弹出预览窗口，点击确认即可完成批量导入人员信息</div>
              <div class="notice">注：批量录入时请务必输入准确的人员信息（真实姓名、身份证号、手机号、银行账户），否则会导致代发失败</div>
            </div>
          </div>
        </div>
      </div>

      <div class="table_list">
        <viewTitle :title="'人员记录'" :border="true"></viewTitle>

          <div class="record_search">
            <el-form ref="form" label-width="auto" :inline="true" >
            <div class="flex record_search_flex" >
         
              <div class="creation_time flex flexR center">
                <el-form-item label="创建时间:">
                  <el-date-picker
                    v-model="form.creation_time"
                    value-format="timestamp"
                    type="datetimerange"
                    align="right"
                    :default-time="['0:00:00','23:59:59']"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions"
                  ></el-date-picker>
                </el-form-item>
              </div>
              <div class="keyword flex flexR center">
                <el-form-item label="关键字:">
                  <el-input
                    v-model="form.keyword"
                    placeholder="请输入姓名/手机号/身份证号/银行卡号"
                    :clearable="true"
                  ></el-input>
                </el-form-item>
              </div>
      
              <div class="sign_servicer flex flexR center">
                <el-form-item label="人员状态:">
                  <el-select v-model="form.is_auth_select" clearable placeholder="请选择">
                    <el-option
                      v-for="item in form.is_auth"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </el-form>
            <div class="flex flexR center searchBtn">
              <el-button type="primary" @click="query">查询</el-button>
              <el-button type @click="reset">重置</el-button>
              <el-button type="warning" @click="add_personnel_show = !add_personnel_show" v-show="isAdd">新增</el-button>
            </div>
          </div>
        <div class="table_lists">
          <el-table
            border
            :data="tableData"
            style="width: 100%;max-width:none;"
            :header-cell-style="getRowClass"
            :select-on-indeterminate="true"
            :fit="true"
            :lazy="true"
            @row-click="clickRow"
            max-height="450"
          >
            <el-table-column fixed="left" type="index" label="序号" width="100"></el-table-column>
            <el-table-column prop="professional_sn" label="编号" width="150"></el-table-column>
            <el-table-column prop="name" label="姓名" width="120"></el-table-column>
            <el-table-column prop="cer_code" label="身份证" width="200"></el-table-column>
            <el-table-column prop="bank_code" label="银行卡号" width="300"></el-table-column>
            <el-table-column prop="mobile" label="预留手机号码" width="120"></el-table-column>
            <el-table-column prop="is_auth" label="人员状态" width="100"></el-table-column>
            <el-table-column prop="created_time" label="创建时间" width="200"></el-table-column>
            <!-- <el-table-column fixed="right" label="操作" width="150">
              <template slot-scope="scope" class="table_operation">
                <el-button
                  type="primary"
                  @click="look(scope.row.enterprise_professional_facilitator_id)"
                >签约详情</el-button>
              </template>
            </el-table-column>-->
          </el-table>

          <div class="flex flexR paging">
            <el-pagination
              style="background:#fff; padding:10px 0"
              background
              layout="total, sizes,prev, pager, next"
              @size-change="handleSizeChange($event)"
              @current-change="changePage($event)"
              :page-sizes="[10, 20, 30, 50]"
              :page-size="pagination.page_size"
              :total="pagination.total_count"
              :current-page="pagination.current_page"
              :page-count="pagination.page_count"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </views>
</template>


<script>
import  {mapGetters}  from  'vuex'

export default {
  name: "records",
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      tableData: [],
      pagination: {
        //分页数据
        page_start: 0, //搜索开始页码
        current_page: 0, //当前页码
        page_count: 0, //总页数
        page_size: 10, //每页数量
        total_count: 0 //总数量
      },

      add_personnel_show: false, // 新增弹框
      add_personnels: {
        name: "", //  姓名
        cer_code: "", //  身份证
        mobile: "", //  手机号码
        bank_code: "" //  银行卡号
      }, // 新增人员
      marginLeft: 0,
      search_list2: ["flex", "flexR", "search_list2"],
      search_list1: ["flex", "flexR", "search_list2"],
      form: {
        keyword: "", // 关键字
        creation_time: [], // 创建时间
        is_auth: [
          { value: null, label: "全部" },
          { value: "0", label: "未认证" },
          { value: "1", label: "已认证" }
        ],
        is_auth_select: null
      },
      fileList: [], // 上传列表
      download_url: "", // 导出列表
      // personlist_xlsx: 
        // "http://wiki.zhuoyankeji.com/uploads/202002/5e3b7c945c21f_5e3b7c94.xlsx" //人员模板下载地址
    };
  },
  computed: {
    //实时计算要传输的编辑参数
    post_data() {
      let data = {};
      if (this.form.creation_time && this.form.creation_time.length > 0) {
        data.from_time = this.form.creation_time[0]/1000;
        data.end_time = this.form.creation_time[1]/1000;
      }
      data.keyword = this.form.keyword;
      if (this.form.is_auth_select !== null)
        data.is_auth = this.form.is_auth_select;
      data.pagination = this.pagination;
      return data;
    },
    ...mapGetters(['getButtonPermission']),
    isAdd(){
      return  this.getButtonPermission[this.$route.path]  &&  this.getButtonPermission[this.$route.path].add ? 1 : 0;
    },
    personlist_xlsx(){
      return  this.$config.serverURL + 'template/人员导入模板.xlsx';
    }
  },
  methods: {
    query() {
      //获取人员记录列表
      let { code, msg, data } = this.$api.sendSync(
        this.$mapapi.e_employeeList,
        this.post_data
      );
      if (code != 200) {
        this.$message.error(msg);
        this.tableData = [];
        return;
      }
      this.tableData = data.list;
      this.pagination = data.pagination;
      this.download_url = data.download_url || "";
      console.log("typeof pagesize", data);
    },
    look(professional_sn) {
      console.log("id", professional_sn);
      //查看签约详情---是跳转到签约列表，只是带了人员编号筛选条件过去
      //单独的签约详情页面还没写的
      this.$toRoutePath({
        path: "/enterprise_office_sign",
        edit: true,
        query: { enterprise_professional_facilitator_id }
      });
    },
    handleSizeChange(page_size) {
      //变动每页数量时
      this.pagination.page_size = page_size;
      this.query();
    },
    changePage(current_page) {
      //切换页码时
      this.pagination.page_start = current_page;
      this.query();
    },
    //    修改第一行样式
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background: #FAFAFA ";
      } else {
        return "";
      }
    },
    //     点击单行
    clickRow(row, column, event) {
      console.log(row, column, event);
    },
    //    修改是否换行
    changeStyleRow(width) {
      let _width = width - 290 - 350 - 300 - 50 - 25;
      if (_width > 300) {
        this.marginLeft = 25;
      } else {
        this.marginLeft = 0;
      }
    },
    //发送新增人员请求
    add_personnel_send() {
      let post_data = this.add_personnels;
      post_data.cer_code = this.$toU(post_data.cer_code);
      for (let i in post_data) {
        if (post_data[i] == "") {
          this.$message.error("请输入完整");
          this.$refs[i].focus();
          return;
        }
      }
      let { code, msg, data } = this.$api.sendSync(
        this.$mapapi.e_addEmployee,
        post_data
      );
      if (code != 200) return this.$message.error(msg);
      this.$message.success(msg);
      this.add_personnels = {};
      this.add_personnel_show = false;
      this.query();
    },
    //  重置
    reset() {
      this.form.keyword = ""; // 关键字
      this.form.creation_time = ""; // 创建时间
      this.form.is_auth_select = null; // 签约服务商
      this.query();
    },
    //  上传文件-------
    submitUpload() {
      console.log("点击", this.fileList);
      let list = this.fileList || [];
      if (list.length == 0) {
        this.$message({
          message: "你选择上传的文件",
          type: "warning"
        });
        return;
      }
      var formData = new FormData();
      formData.append("file", this.fileList[0]);
      formData.append("token", this.$store.state.token);
      this.$api
        .upload(this.$mapapi.eUploadEmployee, formData)
        .then(response => {
          // console.log("上传成功返回", response);
          if (response.code != 200) {
            this.$message.error(response.msg);
          } else {
            this.$message.success(response.msg);
            // this.reset();
            // this.query();
          }
        });
    },
    //点击文件列表中已上传的文件时的钩子
    handlePreview(file) {},
    //文件列表移除文件时的钩子
    handleRemove(file, fileList) {},
    //删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除
    beforeRemove(file, fileList) {
      this.fileList = [];
    },
    // 文件超出个数限制时的钩子
    handleExceed(files, fileList) {},
    // 文件发生改变
    changeFile(file) {
      this.fileList[0] = file.raw || {};
    },
    // 导出
    import_excal(url) {
      this.$import_excal(url || "");
    }
  },
  mounted() {
    this.changeStyleRow(this.$refs.enterprise_office_personlist.clientWidth);
    //获取人员记录列表
    this.query();
  }
};
</script>



<style lang="less" :scope="true" src="@/style/personnel/personlist.less">
</style>
